<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
      width: 200px;
      height: 200px;
      border: 1px solid #09f;
      box-shadow: 2px 2px 1px #666;
      position: absolute;
    }
    </style>
</head>
<body>
    <input type="button" value="弹窗1">
    <input type="button" value="弹窗2">
    <script>
        var allbtn = document.querySelectorAll('input'),offset=20,index=1;
        function Modal(pos){
            this.offset=pos || 20;
            this.hide=false;
        }
        Modal.prototype.creat=function(){
            this.oDiv = document.createElement('div');
            var that=this;
            this.oDiv.addEventListener('click',function(){
                that.hide=true;
                this.style.display='none';
            })
            this.oDiv.style.left = (++index) * this.offset + 'px';
            this.oDiv.style.top = (++index) * this.offset + 'px';
            this.oDiv.innerHTML = index
            return this.oDiv;
        }
        Modal.getInstance=(function(){
            // 闭包空间
            var ins = null,isExist=null;
            return function(pos){
                if(!ins){
                    ins=new Modal(pos);
                }
                if(!isExist){
                        document.body.appendChild(ins.creat());
                        isExist=true;
                    }
                if(ins && ins.hide){
                    ins.oDiv.style.display='block';
                }
            }
        })()
        allbtn[0].addEventListener('click',function(){
            Modal.getInstance();
        });
        allbtn[1].addEventListener('click',function(){
            Modal.getInstance();
        });
    </script>
</body>
</html>